import { Box, Image, Flex, Text, Link } from "@chakra-ui/react";
import { useTranslation } from "@/src/i18n";
import { getImgPath } from "@/src/utils";
import { useRouter } from "next/navigation";

const imgPath = getImgPath();

const Header = () => {
  const router = useRouter();
  const { t } = useTranslation("");
  // 常量配置
  const headerConfig = {
    height: "60px",
    title: t("myEquipment"),
    homeUrl: "https://www.mchose.com.cn:9999/#/connectDevice",
    images: {
      back: `${imgPath}/svgs/arrow-left.svg`,
      logo: `${imgPath}/logo.png`,
    },
  } as const;

  const back = () => {
    // window.history.back();
    router.push("/");
  };

  return (
    <Box
      as="header"
      height={headerConfig.height}
      backgroundColor="#211a31"
      borderBottom="1px solid"
      borderColor="#aaaaaa"
    >
      <Flex justify="space-between" align="center" px={6} py={1} height="100%">
        <Flex align="center" cursor="pointer" onClick={() => back()}>
          {/* <Link 
            href={headerConfig.homeUrl}
            display="flex"
            alignItems="center"
            _hover={{ opacity: 0.8 }}
          > */}
          <Image src={headerConfig.images.back} alt="返回" mr={3} />
          {/* </Link> */}
          <Text fontSize="16px" fontWeight="bold" color="white">
            {headerConfig.title}
          </Text>
        </Flex>
        <Box>
          <Image width="80px" src={headerConfig.images.logo} alt="logo" />
        </Box>
      </Flex>
    </Box>
  );
};

export default Header;
